<template>
  <div>
    <TopBar>更换支付宝</TopBar>
    <section class="changeAlipayContainer"  style="margin-top:1.5rem">
      <input type="text" v-model="alipay" class="defaultInput" placeholder="支付宝账号">
      <input type="text" v-model="nick" class="defaultInput" placeholder="支付宝昵称">
      <div id="changeAlipayBtn" @click="changeAlipay" :style="bg">绑定</div>
    </section>
    <toast 
      v-model="showPositionValue" 
      type="text" 
      :time="2000" 
      is-show-mask 
      :text="msg" 
      position="middle"></toast>
  </div>
</template>
<script>
import TopBar from '../../component/common/TopBar'
import { Toast } from 'vux'
import {verify,showMsg,getStore} from '../../../config/mUtils'
import {changeAlipay} from '../../../service/getData'
import { clearTimeout } from 'timers';
import {getSDK} from '../../../service/wxShare.js'

let time = null
export default {
  components:{
    TopBar,
    Toast
  },
  beforeCreate(){
    getSDK()
  },
  data(){
    return {
      alipay:'',
      msg:'',
      showPositionValue:false,
      nick:'',//支付宝昵称
    }
  },
  methods:{
    changeAlipay(){
      if(this.alipay.length == 0){
        showMsg('支付宝不能为空',this)
      }else if(this.nick == ''){
        showMsg('昵称不能为空',this)
      }else{
        changeAlipay(getStore('loginkey'),this.alipay,this.nick)//TODO:增加昵称参数
          .then(res=>{
            if(res.status == 1){
              time = setTimeout(()=>{
                this.$router.replace('/cashManager')
              },2000)
            }
            showMsg(res.msg,this)
          })
      }
    }
  },
  computed:{
    bg(){
      if(this.alipay.length!=0){
        return 'backgroundColor:#e44c2c'
      }
    }
  },
  beforeDestroy(){
    clearTimeout(time)
  }
}
</script>
<style lang="less">
  @import '../../../style/mixin.less';

  .changeAlipayContainer{
    .wh(85%,100%);
    margin: 0 auto;
    .defaultInput{
      .wh(100%,1.4133rem);
      outline: none;
      border: 1px solid #f6f6f6;
      border-left: none;
      border-right: none;
      border-top: none;
      font-size: 0.44rem;
    }
    #changeAlipayBtn{
      .wh(100%,1.1733rem);
      margin-top: 1.0933rem;
      .bg(#dedede);
      .borderRadius(2rem);
      text-align: center;
      line-height: 1.1733rem;
      .sc(0.44rem,#fff);
    }
  }
  .weui-toast,.weui-toast_text,.vux-toast-middle{
          width: 70% !important;
        }
</style>
